<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <link rel="stylesheet" href="./style/css/index.css" />
    <link rel="stylesheet" href="./style/css/reset.css" />
  </head>
  <body>
    <div class="main-wrapper">
      <div class="menu">
        <div class="menu-left">
          <div class="menu-left-header">
            <div class="menu-left-header-icon1"></div>
            <div class="menu-left-header-icon2"></div>
            <div class="menu-left-header-icon3"></div>
            <div class="menu-left-header-icon4"></div>
          </div>
          <div class="menu-left-footer">
            <i class="menu-left-footer-grid"></i>
            <i class="settings"></i>
          </div>
        </div>
        <div class="menu-right">
          <div class="menu-right-header">
            <div class="menu-right-header-col">
              <div class="title border-none">
                <h3>MENU</h3>
                <i class="settings"></i>
              </div>
              <ul class="menu-ul">
                <li class="menu-li">Overview</li>
                <li class="menu-li">
                  Sales
                  <div class="oval">54</div>
                </li>
                <li class="menu-li">
                  Your Staff
                </li>
                <li class="menu-li">
                  Analytics&Targeting
                </li>
                <li class="menu-li">
                  What's new
                </li>
              </ul>
            </div>
            <div class="menu-right-header-col">
              <div class="title">
                <h3>YOUR PRODUCTS</h3>
                <i class="settings"></i>
              </div>
              <ul class="menu-ul">
                <li class="menu-li">
                  <div class="li-icon1"></div>
                  Books
                </li>
                <li class="menu-li">
                  <div class="li-icon2"></div>
                  Tutorials
                </li>
                <li class="menu-li">
                  <div class="li-icon3"></div>
                  Stocks
                </li>
                <li class="menu-li">
                  <div class="li-icon4"></div>
                  Infographics
                </li>
              </ul>
            </div>
            <div class="menu-right-header-col">
              <div class="title">
                <h3>DASHBOARD</h3>
                <i class="settings"></i>
              </div>
              <ul class="menu-ul">
                <li class="menu-li">Overview</li>
                <li class="menu-li">
                  Messages
                  <div class="oval">21</div>
                </li>
                <li class="menu-li">
                  Connections
                </li>
                <li class="menu-li">
                  Integrations
                  <div class="red-cricle">!</div>
                </li>
                <li class="menu-li">
                  Account Settings
                </li>
                <li class="menu-li">
                  App Settings
                </li>
              </ul>
            </div>
          </div>
          <div class="menu-right-footer">
            <div class="menu-right-footer-text">
              Monthly Goals$580 / $ 3200
            </div>
            <div class="progress">
              <div class="progress-bar"></div>
            </div>
          </div>
        </div>
      </div>
      <div class="content">
        <div class="content-top">
          <h1 class="content-top-left">Messages</h1>
          <div class="content-top-right">
            <div class="useImg">
              <div class="statusBg">
                <div class="status"></div>
              </div>
            </div>
            <div class="name">
              <h3 class="name-span1">Jordan J.</h3>
              <h3 class="name-span2">Administrator</h3>
            </div>
            <div class="dropdown"></div>
          </div>
        </div>
        <div class="main-content">
          <div class="content-left">
            <div class="content-left-top">
              <input type="text" placeholder="Search" class="search" />
              <div class="submit"></div>
            </div>
            <ul class="message-list">
              <li class="message-item">
                <div class="item-top">
                  <div class="itemImg"></div>
                  <div class="itemName">
                    <h3 class="name-span1">Jordan J.</h3>
                    <h3 class="name-span2">Administrator</h3>
                  </div>
                  <div class="itemDistance">3m</div>
                </div>
                <div class="item-bottom">
                  <div class="itemText">
                    I pay for the 4Mb/sec down, 512 Kb/sec up service from O2.
                    In fact, it's relatively quick, and stable it's relatively
                    quick, and stabl
                  </div>
                  <div class="itemIcon"></div>
                </div>
              </li>
              <li class="message-item">
                <div class="item-top">
                  <div class="itemImg"></div>
                  <div class="itemName">
                    <h3 class="name-span1">Jordan J.</h3>
                    <h3 class="name-span2">Administrator</h3>
                  </div>
                  <div class="itemDistance">3m</div>
                </div>
                <div class="item-bottom">
                  <div class="itemText">
                    I pay for the 4Mb/sec down, 512 Kb/sec up service from O2.
                    In fact, it's relatively quick, and stable it's relatively
                    quick, and stabl
                  </div>
                  <div class="itemIcon"></div>
                </div>
              </li>
              <li class="message-item">
                <div class="item-top">
                  <div class="itemImg"></div>
                  <div class="itemName">
                    <h3 class="name-span1">Jordan J.</h3>
                    <h3 class="name-span2">Administrator</h3>
                  </div>
                  <div class="itemDistance">3m</div>
                </div>
                <div class="item-bottom">
                  <div class="itemText">
                    I pay for the 4Mb/sec down, 512 Kb/sec up service from O2.
                    In fact, it's relatively quick, and stable it's relatively
                    quick, and stabl
                  </div>
                  <div class="itemIcon"></div>
                </div>
              </li>
              <li class="message-item">
                <div class="item-top">
                  <div class="itemImg"></div>
                  <div class="itemName">
                    <h3 class="name-span1">Jordan J.</h3>
                    <h3 class="name-span2">Administrator</h3>
                  </div>
                  <div class="itemDistance">3m</div>
                </div>
                <div class="item-bottom">
                  <div class="itemText">
                    I pay for the 4Mb/sec down, 512 Kb/sec up service from O2.
                    In fact, it's relatively quick, and stable it's relatively
                    quick, and stabl
                  </div>
                  <div class="itemIcon"></div>
                </div>
              </li>
              <li class="message-item">
                <div class="item-top">
                  <div class="itemImg"></div>
                  <div class="itemName">
                    <h3 class="name-span1">Jordan J.</h3>
                    <h3 class="name-span2">Administrator</h3>
                  </div>
                  <div class="itemDistance">3m</div>
                </div>
                <div class="item-bottom">
                  <div class="itemText">
                    I pay for the 4Mb/sec down, 512 Kb/sec up service from O2.
                    In fact, it's relatively quick, and stable it's relatively
                    quick, and stabl
                  </div>
                  <div class="itemIcon"></div>
                </div>
              </li>
              <li class="message-item">
                <div class="item-top">
                  <div class="itemImg"></div>
                  <div class="itemName">
                    <h3 class="name-span1">Jordan J.</h3>
                    <h3 class="name-span2">Administrator</h3>
                  </div>
                  <div class="itemDistance">3m</div>
                </div>
                <div class="item-bottom">
                  <div class="itemText">
                    I pay for the 4Mb/sec down, 512 Kb/sec up service from O2.
                    In fact, it's relatively quick, and stable it's relatively
                    quick, and stabl
                  </div>
                  <div class="itemIcon"></div>
                </div>
              </li>
              <li class="message-item">
                <div class="item-top">
                  <div class="itemImg"></div>
                  <div class="itemName">
                    <h3 class="name-span1">Jordan J.</h3>
                    <h3 class="name-span2">Administrator</h3>
                  </div>
                  <div class="itemDistance">3m</div>
                </div>
                <div class="item-bottom">
                  <div class="itemText">
                    I pay for the 4Mb/sec down, 512 Kb/sec up service from O2.
                    In fact, it's relatively quick, and stable it's relatively
                    quick, and stabl
                  </div>
                  <div class="itemIcon"></div>
                </div>
              </li>
              <li class="message-item">
                <div class="item-top">
                  <div class="itemImg"></div>
                  <div class="itemName">
                    <h3 class="name-span1">Jordan J.</h3>
                    <h3 class="name-span2">Administrator</h3>
                  </div>
                  <div class="itemDistance">3m</div>
                </div>
                <div class="item-bottom">
                  <div class="itemText">
                    I pay for the 4Mb/sec down, 512 Kb/sec up service from O2.
                    In fact, it's relatively quick, and stable it's relatively
                    quick, and stabl
                  </div>
                  <div class="itemIcon"></div>
                </div>
              </li>
              <li class="message-item">
                <div class="item-top">
                  <div class="itemImg"></div>
                  <div class="itemName">
                    <h3 class="name-span1">Jordan J.</h3>
                    <h3 class="name-span2">Administrator</h3>
                  </div>
                  <div class="itemDistance">3m</div>
                </div>
                <div class="item-bottom">
                  <div class="itemText">
                    I pay for the 4Mb/sec down, 512 Kb/sec up service from O2.
                    In fact, it's relatively quick, and stable it's relatively
                    quick, and stabl
                  </div>
                  <div class="itemIcon"></div>
                </div>
              </li>
            </ul>
          </div>
          <div class="content-right">
            <div class="content-right-top">
              <div class="right-title">
                <h3>Bessie Berry</h3>
                <span class="right-title-span"></span>
              </div>
              <div class="right-btn">
                <ul class="btn-left">
                  <li class="contentIcon5"></li>
                  <li class="contentIcon6"></li>
                  <li class="contentIcon7"></li>
                </ul>
                <div>
                  1 of 28
                </div>
                <ul class="btn-right">
                  <li class="contentIcon8"></li>
                  <li class="contentIcon9"></li>
                </ul>
              </div>
            </div>
          <!--   <div class="content-right-main"> -->
              <ul class="content-list">
                <li class="content-item">
                  <div class="item-img">
                    <div class="useImg"></div>
                  </div>
                  <div class="dec">
                    <div class="content-title">
                      <span class="title-span1">Bessie Berry</span>
                      <span class="title-span2">8:31AM</span>
                    </div>
                    <p class="content-text">
                      Hi guys Ive got the O2 package and have really slow
                      internet. A speed check online said i can get 3mbps but it
                      seems more like 0.5 these days, just freezing and taking
                      ages to open pages and open audio files for example. I
                      have decided to switch to the UPC package which offers
                      10mbps but do you think i will get it?
                    </p>
                  </div>
                </li>
                <li class="content-item">
                  <div class="item-img">
                    <div class="useImg"></div>
                  </div>
                  <div class="dec">
                    <div class="content-title">
                      <span class="title-span1">Jordan Jackson</span>
                      <span class="title-span2">8:31AM</span>
                    </div>
                    <p class="content-text">
                      I have internet for 9 month and nevere could benefit from
                      the full capacity of 5Mbit/s as it is filtered by O2 when
                      it detect traffic on public p2p sharing in my situation
                      all my internet speed slows to 512Kbit/s. I never had
                      400KB/s on when downloading from p2p public servers like
                      torrent emule etc. I downoad with 500KB/s from private
                      trakers instead. So conlcusion O2 block trafic on p2p
                      connections. I have made hundreds of test in Italy and
                      Sweden and Romania with the same file to doanload with the
                      same setting and same antivirus and just needed to open
                      ports in firewall and forward same ports and the speed was
                      at full capacity in 1 minute. here in 9 month never had
                      this luck.
                    </p>
                  </div>
                </li>
              </ul>
              <p class="text-info">
                <i class="line"></i>
                <span class="txt">Tuesday</span>
                <i class="line"></i>
              </p>

              <ul class="content-list">
                <li class="content-item">
                  <div class="item-img">
                    <div class="useImg"></div>
                  </div>
                  <div class="dec">
                    <div class="content-title">
                      <span class="title-span1">Bessie Berry</span>
                      <span class="title-span2">8:31AM</span>
                    </div>
                    <p class="content-text">
                      Hi guys Ive got the O2 package and have really slow
                      internet. A speed check online said i can get 3mbps but it
                      seems more like 0.5 these days, just freezing and taking
                      ages to open pages and open audio files for example. I
                      have decided to switch to the UPC package which offers
                      10mbps but do you think i will get it?
                    </p>
                  </div>
                </li>
                <li class="content-item">
                  <div class="item-img">
                    <div class="useImg"></div>
                  </div>
                  <div class="dec">
                    <div class="content-title">
                      <span class="title-span1">Jordan Jackson</span>
                      <span class="title-span2">8:31AM</span>
                    </div>
                    <p class="content-text">
                      I have internet for 9 month and nevere could benefit from
                      the full capacity of 5Mbit/s as it is filtered by O2 when
                      it detect traffic on public p2p sharing in my situation
                      all my internet speed slows to 512Kbit/s. I never had
                      400KB/s on when downloading from p2p public servers like
                      torrent emule etc. I downoad with 500KB/s from private
                      trakers instead. So conlcusion O2 block trafic on p2p
                      connections. I have made hundreds of test in Italy and
                      Sweden and Romania with the same file to doanload with the
                      same setting and same antivirus and just needed to open
                      ports in firewall and forward same ports and the speed was
                      at full capacity in 1 minute. here in 9 month never had
                      this luck.
                    </p>
                  </div>
                </li>
              </ul>
              <p class="text-info">
                <i class="line line-blue"></i>
                <span class="txt txt-blue">New Messages</span>
                <i class="line line-blue"></i>
              </p>
              <ul class="content-list">
                <li class="content-item">
                  <div class="item-img">
                    <div class="useImg"></div>
                  </div>
                  <div class="dec">
                    <div class="content-title">
                      <span class="title-span1">Bessie Berry</span>
                      <span class="title-span2">8:31AM</span>
                    </div>
                    <p class="content-text">
                      Hi guys Ive got the O2 package and have really slow
                      internet. A speed check online said i can get 3mbps but it
                      seems more like 0.5 these days, just freezing and taking
                      ages to open pages and open audio files for example. I
                      have decided to switch to the UPC package which offers
                      10mbps but do you think i will get it?
                    </p>
                  </div>
                </li>
                <li class="content-item">
                  <div class="addMessaage">
                    <div class="add"></div>
                    <input
                      type="text"
                      value="Well, kinda both :) but more of that second option, i`ve seen many systems infected and crawling with"
                    />
                  </div>
                </li>
              </ul>
            </div>
         <!--  </div> -->
        </div>
      </div>
    </div>
  </body>
  <script>
    var messageHeight=document.body.clientHeight-81-86+'px';
    console.log(messageHeight);
    document.getElementsByClassName('message-list')[0].style.maxHeight= messageHeight;
    var contentHeight=document.body.clientHeight-81+'px';
    document.getElementsByClassName('content-right')[0].style.maxHeight= contentHeight;
  </script>
</html>
